// 轮播图特效
(function(){
    var carousel_list = document.getElementById('carousel_list');
    var leftbtn = document.getElementById('leftbtn');
    var rightbtn = document.getElementById('rightbtn');
    var circle_ol = document.getElementById('circles');
    var circle_lis = circle_ol.getElementsByTagName('li');
    var banner = document.getElementById('banner');

    //克隆第一张li
    var clone_li = carousel_list.firstElementChild.cloneNode(true);
    //上树
    carousel_list.appendChild(clone_li);

    //当前正在显示的图片序号，从0开始
    var idx = 0;

    //创建节流锁
    var lock = true;

    //右按钮事件监听
    rightbtn.onclick = right_btn_handler;
    
    //右按钮的事件处理函数
    function right_btn_handler(){
        //判断节流锁的状态，如果关闭，不执行
        if(!lock) return;

        //关锁
        lock = false;        
        //加上过渡属性，后面判断是不是最后一张时删除了过渡属性
        carousel_list.style.transition = 'transform .7s ease 0s';
        //点击一次idx加1
        idx++;
        //判断是否是最后一张，如果是最后一张，就要瞬间移动回来
        if(idx > 4){
            setTimeout(function(){
                //去掉过渡
                carousel_list.style.transition = 'none';
                //去掉transform属性
                carousel_list.style.transform = 'none';
                idx = 0;
            },700)
        }
        //拉动
        carousel_list.style.transform = "translateX(" + -16.66*idx +'%)';

        //设置小圆点
        setCircles();


        //开锁，要等动画结束再开锁
        setTimeout(function(){
            lock = true;
        },700)
    };

    leftbtn.onclick = function(){
        //判断节流锁的状态，如果关闭，不执行
        if(!lock) return;

        //关锁
        lock = false;
        //左按钮特殊，需要先写if语句，而不是idx--
        if(idx == 0){
            //瞬间拉到最后
            carousel_list.style.transition = 'none';
            //拉到最后
            carousel_list.style.transform = 'translateX(' + -16.66 * 5 + '%)';
            //改变idx的值
            idx = 4;

            //延时0毫秒，可以让刚才的瞬移发生之后，再把过渡加上
            setTimeout(function(){
                //加上过渡
                carousel_list.style.transition = 'transform .7s ease 0s';
                carousel_list.style.transform = 'translateX(' + -16.66*4 + '%)';

            })
        }else{
        idx --;
        carousel_list.style.transform = 'translateX(' + -16.66 * idx + '%)'
        }

        setCircles();
        
    
        setTimeout(function(){
            lock = true;
        },700)
    }

    //设置小圆点的current在谁身上，序号为idx的小圆点才有current类名，其他的li都没有类名
    function setCircles(){
        //遍历，遍历0，1，2，3，4就行
        for(var i = 0;i < 5;i++){
            if(i == idx % 5){//在idx>4时，有一瞬间时等于5的，所有要让他等于5的时候为1，所有用取余数操作
                circle_lis[i].className = 'current';
            }else{
                circle_lis[i].className = '';
            }
        }
    }

    //事件委托。小圆点的监听
    circle_ol.onclick = function(e){
        if(e.target.tagName.toLowerCase() == 'li'){
            //得到li身上的data-n属性，就是n
            var n = e.target.getAttribute('data-n');
            idx = n;
            //拉动到n的位置
            carousel_list.style.transform = 'translateX(' + -16.66*idx +'%)';
            //调用一下函数使得小圆点自己改变
            setCircles();
        }
    }

    //定时器，自动轮播
    var timer= setInterval(right_btn_handler ,2000);

    //鼠标进入，轮播停止
    banner.onmouseenter = function(){
        clearInterval(timer);
    }

    //鼠标离开，继续轮播
    banner.onmouseleave = function(){
        //设表先关
        clearInterval(timer);
        //这里加了var的话就变成局部变量，上面的函数无法清除表
        timer= setInterval(right_btn_handler ,2000);
    }
})();